<nz-modal
  [nzVisible]="visible"
  (nzVisibleChange)="visibleChange.emit($event)"
  (nzOnCancel)="visibleChange.emit(false)"
  (nzOnOk)="save()"
  [nzOkDisabled]="form.invalid"
  [nzWidth]="800"
  [nzTitle]="'::AddPerson' | abpLocalization"
>
  <ng-container *nzModalContent>
    <form nz-form [formGroup]="form" nzLayout="vertical">
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="12">
          <nz-form-item>
            <nz-form-label nzRequired nzFor="personName" nzSpan="6">
              {{ '::PersonName' | abpLocalization }}
            </nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="personName" id="personName" maxlength="256" />
            </nz-form-control>
          </nz-form-item>
        </div>
        <div nz-col nzSpan="12">
          <nz-form-item>
            <nz-form-label nzRequired nzFor="idNumber" nzSpan="6">
              {{ '::IdNumber' | abpLocalization }}
            </nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="idNumber" id="idNumber" maxlength="18" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>

      <div nz-row nzGutter="16">
        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label nzFor="Sex">
              {{ '::Sex' | abpLocalization }}
            </nz-form-label>
            <nz-form-control>
              <input
                nz-input
                formControlName="sex"
                id="Sex"
                maxlength="8"
                [nzAutocomplete]="sexOptions"
              />
              <nz-autocomplete #sexOptions>
                <nz-auto-option nzLabel="男" [nzValue]="'男'">男</nz-auto-option>
                <nz-auto-option nzLabel="女" [nzValue]="'女'">女</nz-auto-option>
              </nz-autocomplete>
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label nzFor="PersonType" nzSpan="6">
              {{ '::PersonType' | abpLocalization }}
            </nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="personType" id="PersonType" maxlength="32" />
            </nz-form-control>
          </nz-form-item>
        </div>

        <div nz-col nzSpan="8">
          <nz-form-item>
            <nz-form-label nzFor="PersonCode" nzSpan="6">
              {{ '::PersonCode' | abpLocalization }}
            </nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="personCode" id="PersonCode" maxlength="64" />
            </nz-form-control>
          </nz-form-item>
        </div>
      </div>
    </form>
  </ng-container>
</nz-modal>
